<template>
    <div>
        <div style="border: 1px gainsboro solid;display: inline-block;width: 33%;padding-top: 10px;border-top: none;
                border-left: none;height: 224px;vertical-align: top">
            <span style="font-weight: bold;font-size: 20px;"><span style="color: #3B9BDB">丨</span>案件统计</span><br>
            <div style="margin-left: 30px;display: inline-block;width: 16%;margin-top: 30px">
                <p style="font-size: 28px;color: #3B9BDB;margin-bottom: -20px;text-align: center">{{spz}}</p>
                <p style="text-align: center">审批中</p>
            </div>
            <div style="display: inline-block;width: 16%;margin-left: 20px">
                <p style="font-size: 28px;color: #3B9BDB;margin-bottom: -20px;text-align: center">{{zb}}</p>
                <p style="text-align: center">在办</p>
            </div>
            <div style="display: inline-block;width: 16%;margin-left: 20px">
                <p style="font-size: 28px;color: #3B9BDB;margin-bottom: -20px;text-align: center">{{closeCases}}</p>
                <p style="text-align: center">结案</p>
            </div>
            <div style="display: inline-block;width: 30%;margin-left: 20px">
                <p style="font-size: 28px;color: #3B9BDB;margin-bottom: -20px;text-align: center">0</p>
                <p style="text-align: center">我的待办事项</p>
            </div>
        </div>
        <div style="border: 1px gainsboro solid;display: inline-block;width: 66%;height: 224px;padding-top: 10px;
                vertical-align: top;border-top: none;border-right: none;margin-left: -1px;padding-left: 10px">
            <span style="font-weight: bold;font-size: 20px;"><span style="color: #3B9BDB">丨</span>我的待收款案件
            <span><el-button size="mini" style="float: right" @click="queryPayCases">+更多</el-button></span></span><br>
            <el-table
                    :data="caseData"
                    style="width: 100%;margin-top: 10px;margin-bottom: 10px;height: 191px">
                <el-table-column
                        align="center"
                        prop="caseNo"
                        label="案号"
                        width="149">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="caseCause"
                        label="案由">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="caseWtr"
                        label="委托人">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="casePaidsal"
                        label="已付款(元)"
                        width="120">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="caseUnpaidsal"
                        label="未付金额"
                        width="100">
                </el-table-column>
            </el-table>
        </div>
        <div style="border: 1px gainsboro solid;display: inline-block;width: 75%;padding: 20px 10px;border-top: none;border-left: none;
                    vertical-align: top;">
            <el-calendar style="border: 1px gainsboro solid">
                <template
                        slot="dateCell"
                        slot-scope="{date, data}">
                    <div slot="reference" class="div-Calendar" @click="calendarOnClick(data)">
                        <p :class="data.isSelected ? 'is-selected' : ''" style="height: 100%">
                            {{data.day.split("-")[2]}}<br>
                            <span style="color: blue">{{showRemark(data)}}</span>
                        </p>
                    </div>
                </template>
            </el-calendar>
        </div>
        <div style="display: inline-block;width: 22%;vertical-align: top;padding-top: 20px">
            <span style="font-weight: bold;font-size: 20px;"><span style="color: #3B9BDB">丨</span>公告通知
            <span><el-button size="mini" style="float: right" @click="queryNotice">+更多</el-button></span></span>
            <el-table
                    :data="AdmNoticeData"
                    @row-click="rowClick"
                    style="width: 100%;margin-top: 10px;margin-left: 20px">
                <el-table-column
                        prop="title">
                </el-table-column>
            </el-table>
        </div>
        <el-dialog title="添加日程" :visible.sync="active" center width="30%">
            <el-form :model="noteForm" :rules="rules" ref="noteForm">
                <el-form-item label="日程描述" prop="remark">
                    <el-input
                            type="textarea"
                            :rows="5"
                            placeholder="请输入内容"
                            maxlength="16"
                            show-word-limit
                            v-model="noteForm.remark">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-popconfirm
                        confirm-button-text='确定'
                        cancel-button-text='算了'
                        icon="el-icon-info"
                        icon-color="red"
                        title="是否移除此日程？"
                        style="margin-left: 10px;margin-right: 10px"
                        @confirm="confirm"
                >
                    <el-button type="warning" slot="reference">撤 销</el-button>
                </el-popconfirm>
                <el-button type="primary" @click="addNote('noteForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import AddCaseService from "../../model/AddCaseService";
    import $ from 'jquery'

    const addCaseService =AddCaseService.getInstance();
    export default {
        name: "HomePage",
        data(){
            return{
                caseData:[],//案件信息
                spz:0,//审批中数量
                zb:"",//在办数量
                closeCases:"",//结案数量
                AdmNoticeData:[],//公告数据
                active:false,//日历对话框
                noteData:[],//日程数据

                noteForm:{
                    date:null,//时间
                    remark:"",//备注
                    userId:JSON.parse(localStorage["user"])[0].id,//提交人
                },

                rules:{
                    remark:[
                        {required:true,message:"请填写内容!"},
                        {max:16,message:"最多16个字符!"}
                    ]
                }
            }
        },
        created() {
            this.queryPayCase();
            this.querySpz();
            this.queryZb();
            this.queryCloseCases();
            this.queryAdmNotice();
            this.queryNote();
        },
        methods:{
            cancel(){//取消事件
                this.active=false;
                this.noteForm.remark="";
            },
            addNote(formName){//提交事件
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let ff=true;
                        $.each(this.noteData,(i,n)=>{
                            if(this.noteForm.date===n.date){
                                this.$message({
                                    type:"error",
                                    message:"不可重复添加(请先撤销)!"
                                });
                                ff=false
                            }
                        });
                        if(ff) {
                            let formData = new FormData();
                            for (const key in this.noteForm) {
                                if (Object.prototype.hasOwnProperty.call(this.noteForm, key)) {
                                    if (this.noteForm[key] != null) {
                                        formData.append(key, this.noteForm[key]);
                                    }
                                }
                            }
                            addCaseService.addNote(this.$http, formData).then(msg => {
                                if (msg.data.status === "50000") {
                                    this.$message({
                                        type: "error",
                                        message: "出错了呢~"
                                    })
                                } else {
                                    addCaseService.queryNote(this.$http, JSON.parse(localStorage["user"])[0].id).then(msg => {
                                        this.noteData = msg.data.data;
                                    });
                                    this.$message({
                                        type: "success",
                                        message: "添加成功~"
                                    });
                                    this.noteForm.remark = "";
                                    this.active = false
                                }
                            })
                        }
                    }
                })
            },
            confirm(){//确定
                  addCaseService.deNote(this.$http,this.noteForm.date).then(msg=>{
                      if (msg.data.status === "50000") {
                          this.$message({
                              type: "error",
                              message: "出错了呢~"
                          })
                      } else {
                          addCaseService.queryNote(this.$http,JSON.parse(localStorage["user"])[0].id).then(msg=>{
                              this.noteData=msg.data.data;
                          });
                          this.$message({
                              type: "success",
                              message: "删除成功~"
                          });
                          this.noteForm.remark="";
                          this.active=false
                      }
                  })
            },
            rowClick(row){//表格点击事件
                this.$router.push({name:"queryadmnoticebyid",params:{id:row.id}})
            },
            queryNotice(){//更多公告
                this.$router.push("/home/admnotice")
            },
            calendarOnClick(data){//日历点击事件
                this.active=true;
                this.noteForm.date=data.day;
            },
            queryPayCase(){//查询付款案件
                this.$loading({//懒加载
                    lock: true,
                    text: '正在查询...',
                    spinner: 'fa fa-refresh fa-spin fa-3x',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                const params={
                    hrEmpId:JSON.parse(localStorage["user"])[0].hrEmpId,
                    caseUnpaidsal:1,
                    pageSize:3,
                };
                addCaseService.querySenior(this.$http,params).then(msg=> {
                    this.caseData = msg.data.data.list;
                    this.$loading().close();
                })
            },
            queryPayCases(){//查询我的待付款案件
                this.$router.push({name:"myCase",params:{activeName:"fourth"}})
            },
            querySpz(){//查询审批中数量
                const params={
                    caseApproveStatus:"1"
                };
                addCaseService.querySenior(this.$http,params).then(msg=>{
                    this.spz=msg.data.data.total
                })
            },
            queryZb(){//查询在办数量
                const params={
                    casePlan:"B"
                };
                addCaseService.querySenior(this.$http,params).then(msg=>{
                    this.zb=msg.data.data.total
                })
            },
            queryCloseCases(){//查询在办数量
                const params={
                    caseSettleStatus:"Y"
                };
                addCaseService.querySenior(this.$http,params).then(msg=>{
                    this.closeCases=msg.data.data.total
                })
            },
            queryAdmNotice() {//初始化公告
                this.$http.get("admNotice", {params: {pageCur:"1",pageSize:"0"}})
                    .then(res => {
                        this.AdmNoticeData = res.data.data.list
                    })
                    .catch()
            },
            queryNote(){//查询日程
                addCaseService.queryNote(this.$http,JSON.parse(localStorage["user"])[0].id).then(msg=>{
                    this.noteData=msg.data.data;
                    $.each(this.noteData,(i,n)=>{
                        if(n.date===this.$date.formatDate(new Date(),"yyyy-MM-DD")){
                            this.open2()
                        }
                    });
                })
            },
            showRemark(data){
                let remark=null;
                $.each(this.noteData,(i,n)=>{
                    if(data.day===n.date){
                        remark=n.remark
                    }
                });
                return remark;
            },
            open2() {
                this.$notify.info({
                    title: '提示',
                    message: '您今天排有日程,请及时处理哟~',
                });
            }
        }
    }
</script>

<style scoped>
    .is-selected {
        color: #1989FA;
    }
</style>